<template>
  <div id="ocode-web">
    <div id="head2">
      <span>溯源信息</span>
    </div>
    <div id="main2">
      <div class="heading">
        <!-- <div class="title">
          <p>快速查询</p>
        </div> -->
        <div id="select1">
          <div class="option"
               @click="iconBase">
            <i class="el-icon-office-building"></i>
            <p>基地信息</p>
          </div>
          <!-- intoStore -->
          <div class="option"
               @click="iconBreed">
            <i class="el-icon-s-order"></i>
            <p>养殖信息</p>
          </div>
          <div class="option"
               @click="iconSlaught">
            <i class="el-icon-folder"></i>
            <p>屠宰信息</p>
          </div>
          <div class="option"
               @click="iconProcess">
            <i class="el-icon-house"></i>
            <p>加工信息</p>
          </div>
          <el-row class="head">
            <el-col>基地图片</el-col>
          </el-row>
          <el-carousel height="9em"
                       indicator-position="none"
                       class="imgBox1">
            <!-- <el-carousel-itrem trigger="click" v-for="item in picSet" :key="item.id"> -->
            <img :src="url"
                 style="height: 100%; width: 100%"
                 alt="图片丢失了" />
            <!-- </el-carousel-itrem> -->
          </el-carousel>
        </div>
      </div>

      <!-- 基地信息开始 -->
      <div class="panel2 baseinfo"
           v-show="isShowBase">
        <el-row class="boby">
          <el-col :span="6"
                  class="label">基地名称：</el-col>
          <el-col :span="18"
                  class="content label">{{
                        this.BaseData.name
                    }}</el-col>
        </el-row>
        <el-row class="boby">
          <el-col :span="6"
                  class="label">法人姓名：</el-col>
          <el-col :span="18"
                  class="content label">{{
                        this.BaseData.principalName
                    }}</el-col>
        </el-row>
        <el-row class="boby">
          <el-col :span="6"
                  class="label">基地地址：</el-col>
          <el-col :span="18"
                  class="content label">{{
                        this.BaseAddress
                    }}</el-col>
        </el-row>
        <el-row class="boby">
          <el-col :span="6"
                  class="label">创建时间：</el-col>
          <el-col :span="18"
                  class="content label">{{
                        this.BaseData.gmtCreate
                    }}</el-col>
        </el-row>
      </div>

      <!-- 养殖信息 -->
      <div class="panel2"
           v-show="isShowBreed">
        <el-table :data="breedInfo"
                  style="margin-top: 0">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left"
                       label-width="85px">
                <el-form-item label="基地名称"
                              class="down-label">
                  <span>{{ props.row.processName }}</span>
                </el-form-item>
                <el-form-item label="批次描述"
                              class="down-label">
                  <span>{{
                                        props.row.processPrincipal
                                    }}</span>
                </el-form-item>
                <el-form-item label="鸽棚负责人"
                              class="down-label">
                  <span>{{
                                        props.row.processingBtches
                                    }}</span>
                </el-form-item>
                <el-form-item label="总价"
                              class="down-label">
                  <span>{{
                                        props.row.processingBtches
                                    }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="产品类型"
                           prop="type">
          </el-table-column>
          <el-table-column label="产品数量"
                           prop="amount">
          </el-table-column>
          <el-table-column label="养殖时间"
                           prop="outTime">
          </el-table-column>
        </el-table>
      </div>

      <!-- 屠宰信息 -->
      <div class="panel2"
           v-show="isShowSlaught">
        <el-row class="boby">
          <el-col :span="6"
                  class="label">屠宰批次：</el-col>
          <el-col :span="18"
                  class="content label">
            {{ this.slaughterInfo.shBatch }}
          </el-col>
        </el-row>
        <el-row class="boby">
          <el-col :span="6"
                  class="label">负责人：</el-col>
          <el-col :span="18"
                  class="content label">{{
                        this.slaughterInfo.handler
                    }}</el-col>
        </el-row>
        <el-row class="boby">
          <el-col :span="6"
                  class="label">屠宰流程名称：</el-col>
          <el-col :span="18"
                  class="content label">{{
                        this.slaughterInfo.processName
                    }}</el-col>
        </el-row>
        <el-row class="boby">
          <el-col :span="6"
                  class="label">屠宰流程描述：</el-col>
          <el-col :span="18"
                  class="content label">{{
                        this.slaughterInfo.processDescribe
                    }}</el-col>
        </el-row>
      </div>

      <!-- 加工信息 -->
      <div class="panel2"
           v-show="isShowProcess">
        <!-- 注意绑定的是一个数组，而不是一个函数 -->
        <el-table :data="processInfo"
                  style="margin-top: 0; font-size: 0.67em">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left"
                       label-width="85px">
                <el-form-item label="加工流程名称"
                              class="down-label">
                  <span>{{ props.row.processName }}</span>
                </el-form-item>
                <el-form-item label="流程负责人"
                              class="down-label">
                  <span>{{
                                        props.row.processPrincipal
                                    }}</span>
                </el-form-item>
                <el-form-item label="原料名称"
                              class="down-label">
                  <span>{{
                                        props.row.processingBtches
                                    }}</span>
                </el-form-item>
                <el-form-item label="加工总数量"
                              class="down-label">
                  <span>{{ props.row.amount }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

          <el-table-column label="加工产品"
                           prop="processingType">
          </el-table-column>

          <el-table-column label="产品数量"
                           prop="amount">
          </el-table-column>

          <el-table-column label="加工时间"
                           prop="processTime">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getData, BaseData } from "@/api/Roots/RootsShow.js";

(function () {
  var styleNode = document.createElement("style");
  /* 当不除以16时此时1em便占据视口宽度,
          那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */
  // var w = document.documentElement.clientWidth;
  /* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */
  var w = document.documentElement.clientWidth / 16; //获取视口大小
  /* 设置此时根元素的fontsize，向html的style样式中添加font-size属性*/
  //被覆盖或者重写了
  styleNode.innerHTML = "#ocode-web{font-size:" + w + "px!important}";
  //向head标签中添加style标签，其中包含html{font-size:w;}
  document.head.appendChild(styleNode);
  console.log("我爱你：" + w);
})();

export default {
  name: "RootsShow",
  meta: {
    title: "溯源信息展示",
  },
  data () {
    return {
      //是否显示基地信息
      isShowBase: true,
      //是否显示养殖信息
      isShowBreed: false,
      // 是否显示屠宰信息
      isShowSlaught: false,
      // 是否显示加工厂信息
      isShowProcess: false,

      // 基地信息
      BaseData: {
        name: "", //基地名称
        principalName: "", //法人代表
        province: "",
        city: "",
        detailedAddress: "",
        picture: "",
        gmtCreate: "",
      },
      BaseAddress: "",
      // 基地图片
      picSet: [
        { url: "./static/all-3.jpg", id: 0 },
        { url: "./static/all-3.jpg", id: 1 },
        { url: "./static/all-3.jpg", id: 2 },
      ],
      url: "",

      // 养殖信息
      breedInfo: [],
      // 屠宰信息
      slaughterInfo: {},
      // 加工信息
      processInfo: [],
    };
  },
  computed: {
    rootId () {
      return this.$route.params.id
    }
  },
  created () {
    this.getDataByID();
    this.getBaseData();
  },

  methods: {
    // 养殖、屠宰、加工信息
    async getDataByID () {
      //  const id = "1454062595158585346";
      const { data: res } = await getData();
      console.log("请求到的列表:", res);
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else {
        this.$message.success("查询用户成功");
        this.processInfo = res.data[0];
        this.slaughterInfo = res.data[1];
        this.breedInfo = res.data[2];
      }
    },
    //  基地信息
    async getBaseData () {
      //  const id="3";
      const { data: res } = await BaseData();
      console.log("请求到的列表asdadas:", res);
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else {
        this.BaseData = res.data;
        this.BaseAddress =
          this.BaseData.province +
          this.BaseData.city +
          this.BaseData.detailedAddress;
        this.url = "http://120.77.156.205:9800" + this.BaseData.picture;
        this.$message.success("查询用户成功");
      }
    },

    // 点击icon，切换界面
    iconBase () {
      this.isShowBase = true;
      this.isShowBreed = false;
      this.isShowSlaught = false;
      this.isShowProcess = false;
    },
    // 点击icon，切换界面
    iconBreed () {
      this.isShowBase = false;
      this.isShowBreed = true;
      this.isShowSlaught = false;
      this.isShowProcess = false;
    },
    // 点击icon，切换界面
    iconSlaught () {
      this.isShowBase = false;
      this.isShowBreed = false;
      this.isShowSlaught = true;
      this.isShowProcess = false;
    },
    // 点击icon，切换界面
    iconProcess () {
      this.isShowBase = false;
      this.isShowBreed = false;
      this.isShowSlaught = false;
      this.isShowProcess = true;
    },
  },
};
</script>
<style lang="scss" scoped>
#ocode-web {
  width: 100%;
  //没有使用百分之百，会出现短暂的空白
  height: 100%;
  background-color: rgb(252, 244, 244);
  overflow-y: auto;
}

#ocode-web::-webkit-scrollbar {
  display: none;
  //或者
  // width: 0px;
}

//设置头部的溯源信息
#head2 {
  height: 4.9em;
  font-size: 1em;
  background-color: rgb(45, 130, 255);
  color: #fff;
  text-align: center;
  line-height: 3em;
}

#main2 {
  width: 100%;
  // height:-webkit-fill-available;
  height: 100%;
  position: relative;
  //控制向上移动
  top: -2.3em;
}

.heading {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  margin: 0 auto;
  width: 97%;
  background-color: #fff;
  //这个现在没什么用
  // .title {
  //   height: 3em;
  //   line-height: 3em;
  //   &::before {
  //     content: '';
  //     position: absolute;
  //     left: 0.9em;
  //     top: 0.5em;
  //     width: 1em;
  //     height: 2em;
  //     border-radius: 4px;
  //     background-color: rgb(45, 130, 255);
  //   }
  //   p {
  //     font-size: 1.3em;
  //     color: rgb(46, 38, 38);
  //     margin-left: 1.8em;
  //   }
  // }
}
#select1 {
  display: flex;
  flex-wrap: wrap;
  .option {
    // flex: 1;
    width: 25%;
    //基地信息下面的空白
    height: 4.7em;
    text-align: center;
    i {
      //图片大小
      font-size: 1.8em;
      // border: 1px solid black;
      //图片上面的空白
      margin-top: 0.4em;
      color: rgb(119, 119, 255);
      cursor: pointer;
    }
    //设置图片下面的字体大小
    p {
      color: rgb(87, 84, 84);
      font-size: 0.85em;
    }
    i:hover {
      color: rgba(0, 0, 0, 0.3);
    }
    i:active {
      color: rgba(0, 0, 0, 0.6);
    }
  }
}
.panel2 {
  width: 97%;
  background-color: rgb(255, 255, 255);
  //设置与第一个盒子的间隔大小
  margin: 1.5em auto 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid rgb(255, 251, 251);
  border-radius: 6px;
  color: rgb(124, 124, 124);
  .head {
    color: rgb(46, 38, 38);
    //基地信息的字体大小
    font-size: 1em;
    //与下面图片的间隔大小
    height: 1em;
    padding-left: 0.5em;
  }
  .label {
    color: rgb(46, 38, 38);
    //与上面图片间隔的大小
    padding-top: 1.5em;
    //设置基地名称的字体大小
    font-size: 0.726em;
    //不设置高度，就会默认被内容撑开，会有进度条
    // height: 2.8em;
  }
  .content {
    //设置基地名称的内容字体大小
    font-size: 0.726em;
    padding-left: 0.6em;
  }
  .boby {
    //设置基地名称向左移动的距离
    padding: 0 0.5em;
  }
}
.baseinfo {
  .imgBox1 {
    margin: 0 auto 0.5em;
    border: 1px solid rgb(182, 181, 181);
    border-radius: 6px;
    width: 98%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
